<template>
    <div class="Main">

        <el-form :model="form" label-width="auto" style="max-width: 800px">
            <el-form-item label="书名" :required="true">
                <el-input v-model="book.name" clearable />
            </el-form-item>
            <el-form-item label="作者" :required="true">
                <el-input v-model="book.author" clearable />
            </el-form-item>
            <el-form-item label="出版社" :required="true">
                <el-input v-model="book.press" clearable />
            </el-form-item>

            <el-form-item label="简介">
                <el-input v-model="book.briefIntroduction" maxlength="30" style="width: 240px" placeholder="请输入简介"
                    show-word-limit type="textarea" />
            </el-form-item>

            <el-form-item label="ISBN(编号)">
                <el-input v-model="book.isbn" clearable />
            </el-form-item>

            <el-form-item :required="true" label="库存" >
                <el-input v-model="book.number" clearable type="number"/>
            </el-form-item>

            <el-form-item label="书本封面">

            <el-upload class="avatar-uploader" :http-request="uploadimg" :show-file-list="false"  style="background-color: white; "

                :before-upload="beforeAvatarUpload" >
                <img v-if="book.img" :src="book.img" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>

            </el-upload>

        </el-form-item>

        <el-form-item label=" " inline>
            <el-button type="primary" @click="uploadData">Primary</el-button>
            <el-button type="danger" @click="resettingdata" >Danger</el-button>

        </el-form-item>

        </el-form>


    </div>
</template>


<style scoped>
.Main {
    width: 1000px;
    height: 700px;
    /* padding: 10px 50px 10px 50px; */
    padding: 10px 50px;
    /* background-color: aqua; */
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>


<script setup>
import { reactive } from 'vue'

import Common from '@/js/api/Common';

import bookApi from '@/js/api/book';

import { ElMessage } from 'element-plus'


const book = reactive({
    name: "",//书名
    author: "",//作者
    briefIntroduction: "",//简介
    press: "",//出版社
    isbn: "",
    img: "",
    number:""//原始库存
})


const uploadimg = (parms) => {

    Common.uploadImg(parms).then((res) => {
        if (res.data.code == 1) {
            ElMessage({
                message: '封面上传成功!',
                type: 'success',
            })
            book.img = res.data.data
        }else{
            ElMessage.error(res.data.msg)
        }
    })

}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('必须为jpg类型')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('最大不能超过 2MB!')
    return false
  }
  return true
}

const uploadData = () =>{
    bookApi.uploadData(book).then((res)=>{
        if (res.data.code == 1) {
            ElMessage({
                message: '信息上传成功!',
                type: 'success',
            })
            book.img = res.data.data
            resettingdata()
        }else{
            ElMessage.error(res.data.msg)
        }
    })

}

const resettingdata = ()=>{
    book.author="",
    book.briefIntroduction="",
    book.img="",
    book.isbn="",
    book.name="",
    book.press="",
    book.number=""
}

</script>